<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 1.导入echarts -->
    <script src="./echarts.js"></script>
  </head>
  <body>
    <!-- 2.写HTML结构 -->
    <div id="main" style="width: 800px;height:400px;"></div>

    <script type="text/javascript">
      /* 3.js初始化 ： 给图表添加数据  */

      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      let myChart = echarts.init(document.getElementById('main'))

      //3.2 指定图表的配置项和数据
      // 设置图表的样式和 数据
      let option = {
        //标题
        title: {
          subtext: '单位:万',
          left: 20,
          subtextStyle: {
            color: '#3e84db'
          }
        },
        //鼠标滑入提示
        tooltip: {
          trigger: 'axis'
        },
        //类似于padding内边距
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        //顶部小标题(注意点：必须要和数据的name值一致)
        legend: {
          data: ['预期销售额', '实际销售额']
        },
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '',
            '三月',
            '',
            '五月',
            '',
            '七月',
            '',
            '九月',
            '',
            '十一月',
            ''
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: 'line',
            //是否平滑曲线(圆角)
            smooth: true,
            //圈圈样式
            symbol: 'emptyCircle',
            //圈圈标记大小
            symbolSize: 8,
            name: '预期销售额',
            //拐点颜色(小圈圈)
            itemStyle: {
              color: '#cf3a36'
            },
            //线条颜色
            lineStyle: {
              color: '#cf3a36'
            }
          },
          {
            name: '实际销售额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            symbolSize: 8,
            //拐点颜色(小圈圈)
            itemStyle: {
              color: '#00dcdf'
            },
            //线条颜色
            lineStyle: {
              color: '#00dcdf'
            },
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          }
        ]
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>
